<template>
  <div class="box-wrap-disp">
    <div class="movie-wrap">
      <div
        class="movie-wrap-card"
        v-for="(item, index) in movieList"
        @click="tabs(item.id)"
      >
        <img :src="item.imgava" />
        <span class="el-icon-video-play plays"></span>
        <span>{{ item.titlt }}</span>
      </div>
    </div>
    <div class="pages">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="110"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Movie",
  data() {
    return {
      movieList: [],
    };
  },
  mounted() {},
  created() {
    // 进入页面加载
    this.$http
      .get("/moviepage", {
        params: {
          pno: 1,
        },
      })
      .then((res) => {
        // console.log(res.data);
        this.$store.commit("videos", res.data);
        this.movieList = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    // 获取当前页
    handleCurrentChange(val) {
      this.$http
        .get("/moviepage", {
          params: {
            pno: val,
          },
        })
        .then((res) => {
          this.movieList = res.data;
          this.$store.commit("videos", res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    tabs(id) {
      console.log(id);
      let datadetails = this.$router.resolve({path:'/videos',query:{id:id}});
      window.open(datadetails.href,'_blank')
    },
  },
};
</script>

<style lang="scss" scoped>
.box-wrap-disp {
  display: flex;
  flex-direction: column;
  .pages {
    width: 100%;
    text-align: center;
  }
}
.movie-wrap {
  width: 1240px;
  min-height: 600px;
  margin: 40px auto;
  .movie-wrap-card span:hover {
    color: rgb(214, 26, 26);
  }

  .movie-wrap-card:hover .plays {
    bottom: 95px;
  }
  .movie-wrap-card {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 270px;
    height: 187px;
    margin: 0 40px 50px 0;
    float: left;
    img {
      width: 270px;
      height: 152px;
    }
    span {
      margin-top: 5px;
      font-weight: bold;
      cursor: pointer;
      display: block;
      width: 250px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.plays {
  color: #fff !important;
  position: absolute;
  bottom: -30px;
  left: 132px;
  opacity: 0.7;
  font-size: 25px;
  transition: all 0.3s;
}
</style>
